﻿@page "/MessageBar"

@using FluentUI.Demo.Shared.Pages.MessageBar.Examples

<PageTitle>@App.PageTitle("MessageBar")</PageTitle>

<h1>MessageBar</h1>

<strong>IMPORTANT!!</strong>
<p>
    MessageBars are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>. This component needs to be added to the layout of your application/site.
    For a message bar that needs to be shown at the top of the screen, you typically do this in the <code>MainLayout.razor</code> file at the location in 
    the HTML structure where you want the message bars to appear  of the <code>&lt;main&gt;</code> section like this:
</p>
<p>
    <strong>
        For the MessageBars to work properly, the <code>&lt;FluentMessageBarProvider/&gt;</code> needs interactivity! If you are using "per page" interactivity, make sure to add a <code>@@rendermode</code> to
        either the provider itself of the component the provider is placed in.
    </strong>
</p>

<CodeSnippet Language="razor">
    @(
@"<main>
    <nav>
        <!-- -->
    </nav>
    <div class=""content"">
        <article id=""article"">
            <FluentMessageBarProvider Section=""MESSAGES_TOP""/>
            @Body
        </article>
    </div>
</main>"
    )
</CodeSnippet>

<h2 id="example">Examples</h2>

<DemoSection Title="Message Service" Component="typeof(MessageBarDefault)">
    <p>
        Click on these buttons to display a message (max 5) in the top,
        in the Notification Center (top/right bell icon) or in a dialog (max 1).<br />
        If you click on "Add in a dialog" multiple times, you will see that only one message is displayed.
        Once you dismiss that one, the next one will be displayed.
    </p>
    <p>This is the advised way to use MessageBars </p>
</DemoSection>

<DemoSection Title="Timed Messages" Component="typeof(MessageBarTimed)">
    <p>
        These message automatically dismiss after a set amount of time.
    </p>
</DemoSection>

<DemoSection Title="MessageBar with options" Component="typeof(MessageBarDetailed)">
    <p>
        Click on the button to display a message (max 5) utilizing the <code>MessageOptions</code> class.
    </p>
</DemoSection>

<DemoSection Title="Simple messages" Component="typeof(MessageBarSimple)">
    <p>
        This example show the different intents that can be shown in a MessageBar. 
        This example does <b>not</b> use the <code>MessageBarService</code>.
    </p>
</DemoSection>

<DemoSection Title="Simple notification" Component="typeof(MessageBarSimpleNotification)">
    <p>
        This example show how a MessageBar can be used to be shown as a notification (border added for styling puroses only).
        This example does <b>not</b> use the <code>MessageBarService</code>.
    </p>
</DemoSection>

<DemoSection Title="Notification Center" Component="typeof(FluentUI.Demo.Shared.Components.NotificationCenter)">
    <p>
        Copy of the button shown in the header which displays the number of notifications. Use the button in the first example to add notifications.
    </p>
</DemoSection>

<h2 id="messageprovider">MessageBar provider</h2>

<h4>Display the list of messages</h4>

<p>
    You display a list of messages for a specific section using the <code>FluentMessageBarProvider</code> component.
</p>

<CodeSnippet>
    @(@"<FluentMessageBarProvider Section=""MESSAGE_SECTION"" Format=""MessageFormat.Notification"" />")
</CodeSnippet>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentMessageBarProvider)" />

<ApiDocumentation Component="typeof(FluentMessageBar)" />

<ApiDocumentation Component="typeof(MessageService)" />

<ApiDocumentation Component="typeof(Message)" />
